<template>
    <div class="task-wrapper">
        <Block>
            <DataGrid :auto-load="autoLoad" border ref="dataGridRef">
                <template #toolbar-search>
                    <div class="query-from-box">
                        <el-form>
                            <el-form-item>
                                <el-input v-model="queryData.jobKey" placeholder="任务名称/标识符" clearable />
                            </el-form-item>
                            <el-form-item>
                                <el-select v-model="queryData.deviceJobState" placeholder="设备任务状态" clearable>
                                    <el-option
                                        v-for="(value, key) in DeviceJobState"
                                        :label="value"
                                        :key="key"
                                        :value="key"
                                    />
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-select placeholder="上一次执行情况" v-model="queryData.jobState" clearable>
                                    <el-option
                                        v-for="(value, key) in JobState"
                                        :label="value"
                                        :key="key"
                                        :value="key"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </template>
                <el-table-column type="index" label="序号" width="60" align="center" fixed />
                <el-table-column label="任务名称" fixed show-overflow-tooltip>
                    <template #default="scope">
                        <el-button link type="primary" @click="onGojob(scope.row)">
                            {{ scope.row.jobName }}
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="jobNo" label="标识符" show-overflow-tooltip />
                <el-table-column label="触发方式" width="100">
                    <template #default="scope">
                        {{ TriggerType[scope.row.triggerType] }}
                    </template>
                </el-table-column>
                <el-table-column label="设备任务状态" width="90">
                    <template #default="scope">
                        <span class="table-item-status" :status="DeviceJobState[scope.row.deviceJobState]">
                            {{ DeviceJobState[scope.row.deviceJobState] }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="上一次执行情况" width="105">
                    <template #default="scope">
                        <span class="table-item-status" :status="JobState[scope.row.jobState]">
                            {{ JobState[scope.row.jobState] }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="95" fixed="right" v-if="checkPermi(['run:task:history'])">
                    <template #default="scope">
                        <el-tooltip content="暂无数据" placement="top" :disabled="scope.row.jobState ? true : false">
                            <el-button
                                link
                                type="primary"
                                @click="onGoHistory(scope.row)"
                                :disabled="!scope.row.jobState"
                            >
                                查看任务日志
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </DataGrid>
        </Block>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { IoTDeviceService } from '@great/services';
import { useRouter } from 'vue-router';
import { TriggerType, DeviceJobState, JobState } from '@/utils/constant';
import { DataGrid, Block, type DataGridInstance } from '@great/components';
import { checkPermi } from '@/utils/ruoyi';

const router = useRouter();
const props = defineProps<{
    detailData?: Record<string, any>;
}>();
// 查询条件
const queryData = ref({
    jobKey: '',
    deviceJobState: '',
    jobState: ''
});
const dataGridRef = useTemplateRef<DataGridInstance>('dataGridRef');

const autoLoad = reactive({
    debounce: true,
    reloadDeps: [queryData],
    onLoad: async (current, size) => {
        const res = await IoTDeviceService.getDeviceJob(props.detailData?.productNo, props.detailData?.deviceNo, {
            current,
            size,
            ...queryData.value
        });
        return { data: res.data.records, total: res.data.total };
    }
});

// 查看任务
const onGojob = (row: { jobNo: string }) => {
    if (checkPermi(['iot-task-detail'])) {
        router.push({
            name: 'IoT-task-detail',
            params: {
                id: row?.jobNo
            }
        });
    }
};

// 查看历史
const onGoHistory = (row: { jobNo: string; deviceNo: string }) => {
    router.push({
        name: 'run-task-history',
        params: {
            id: row?.jobNo,
            no: row?.deviceNo
        }
    });
};
</script>
<style scoped lang="scss">
.task-wrapper {
    .query-from-box {
        display: flex;
        align-items: center;
        .el-form {
            display: flex;
            .el-form-item {
                margin-bottom: 0;
                width: 192px;
            }
            .el-form-item + .el-form-item {
                margin-left: 10px;
            }
        }
    }
    :deep(.data-grid) {
        .table-item-tag {
            display: flex;
        }
        .table-item-status {
            display: flex;
            align-items: center;
            &::before {
                content: '';
                width: 6px;
                height: 6px;
                display: inline-block;
                border-radius: 50%;
                margin-right: 5px;
            }
        }
        .table-item-status[status='执行中'] {
            &::before {
                background-color: #409eff;
            }
        }
        .table-item-status[status='停止'] {
            &::before {
                background-color: #909399;
            }
        }
        .table-item-status[status='成功'] {
            &::before {
                background-color: #67c23a;
            }
        }
        .table-item-status[status='失败'] {
            &::before {
                background-color: #f56c6c;
            }
        }
        .table-item-status[status='超时'] {
            &::before {
                background-color: #e6a23c;
            }
        }
    }
}
</style>
